image coding

code:
        <div class="container">
            <img class="first" src="../images/1.jpg" alt="beach" width="20%" height="20%">   
        </div>
        <style>
            .issue{width: 20vw; height: auto; }
            .container{width: 20vw; height:20.5vw; background-color:red; margin-left:5vw;} 
        </style>

1: set "font-size: 0;" to parent element

2: set "display: block;" to img

3: set "vertical-align:bottom" to img

4: set "line-height: 5px;" to parent element

code:
        <div class="grid_A">
            <div>
                <p>1: set "font-size: 0;" to parent element</p>
                <div class="container-1"><img class="first" src="../images/1.jpg" alt="beach" ></div>
            </div>
            <div>
                <p>2: set "display: block;" to img</p>  
                <div class="container-2"><img class="second" src="../images/1.jpg" alt="beach"></div>
            </div>
            <div>
                <p>3: set "vertical-align:bottom" to img</p>
                <div class="container-3"><img class="third" src="../images/1.jpg" alt="beach"></div>
            </div>
            <div>
                <p>4: set "line-height: 5px;" to parent element</p>
                <div class="container-4"><img class="fourth" src="../images/1.jpg" alt="beach"> </div>
            </div>
        </div>
        <style>
            .first{width: 15vw; height: auto; }
            .container-1{display: flex; flex-flow: column wrap; width: 15vw; height:auto; 
                background-color:red; margin-left:5vw; font-size:0; }
            .second{width: 15vw; height: auto; }
            .container-2{width: 15vw; height:auto; background-color:red; margin-left:5vw; }
            .container-2 .second{display:block;}
            .third{width: 15vw; height: auto; }
            .container-3{width: 15vw; height:auto; background-color:red; margin-left:5vw; }
            .container-3 .third{vertical-align:bottom;} 
            .fourth{width: 15vw; height: auto; }
            .container-4{width: 15vw; height:auto; background-color:red; margin-left:5vw; line-height: 5px}
        </style>

code:
            <div class="container-5">
                <img src="../images/12.jpg" alt="new year">
            </div>
            <style>
                .container-5 {width: 18.75vw; border: 4px solid rgb(30, 194, 66);}
                .container-5 img {display: block; width: 100%; height: 100%;}
            </style>

code:
            <div class="container-6">
                <img src="../images/12.jpg" alt="resting">
            </div>
            <style>
                .container-6 { width: 18.75vw; border: 4px solid rgb(30, 94, 66);}
                .container-6 img {vertical-align: bottom; width: 100%; height: 100%;}
            </style>

code:
            <div class="container-7">
                <img src="../images/12.jpg" alt="new year" width="100%" height="100%">
            </div>
            <style>
                .container-7 {width: 18.75vw; border: 4px solid rgb(230, 94, 66); line-height: 0%; }
            </style>

resolve image coding issues

the image 5px spacing problem

4 solutions to solve the image 5px spacing problem

How to get rid of the gap under the image ?

using display property

using vertical aligning property

using line height property